<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>首页</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<link href="${base}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${base}/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link href="${base}/css/animate.css" rel="stylesheet">

<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script src="${base}/js/content.js?v=1.0.0"></script>
<!-- Sweet alert -->
<script src="${base}/js/plugins/sweetalert/sweetalert.min.js"></script>
</head>

<body>
	<div class="container">
    <h3>创建模态框（Modal）</h3>
    
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button>
    <!--  定义模态框触发器，此处为按钮触发  -->

    <form method="post" action="#" class="form-horizontal" role="form" id="myForm" onsubmit="return ">
        <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
            <div class="modal-dialog">
                <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
                <div class="modal-content">
                    <!--  显示模态框白色背景，所有内容都写在这个div里面  -->

                    <div class="btn-info modal-header">
                        <!--  模态框标题  -->
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <!--  关闭按钮  -->
                        <h4>您好，欢迎进入模态框</h4>
                        <!--  标题内容  -->
                    </div>

                    <div class="modal-body">
                        <!--  模态框内容，我在此处添加一个表单 -->
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="uname" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-9">
                                    <input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <!--  模态框底部样式，一般是提交或者确定按钮 -->
                        <button type="submit" class="btn btn-info">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>

                </div><!-- /.modal-content -->
            </div>
        </div> <!-- /.modal -->
    </form>
</div>
</html>